<template>
  <div class="wrap">
    <div class="container">
      <h2>登录</h2>
      <div class="ipt-item">
        <label for="username">账户</label>
        <input
          type="text"
          v-model="username"
          id="username"
          placeholder="输入账号"
        />
      </div>

      <div class="ipt-item">
        <label for="password">密码</label>
        <input
          type="password"
          v-model="password"
          id="password"
          placeholder="输入密码"
        />
      </div>
      <van-checkbox v-model="remeber" checked-color="#e42929">是否记住账号密码？</van-checkbox>
      <van-checkbox v-model="autoLogin" checked-color="#e42929">是否免登录？</van-checkbox>
      <van-button block @click="loginEvt">登录</van-button>
      <div class="pass" @click="toForget"> 忘记密码?</div>
      <p>登录即代表阅读并同意<span>服务条款</span></p>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from 'vue-router';
import { deCodeApi, enCodeApi,MD5 } from '../../utils';
import { loginApi, userInfoApi, userRoleApi } from '../../apis/loginApi'
import { commonDefinition } from '../../store'
import {Toast } from 'vant'
const router = useRouter()

const username = ref("");
const password = ref("");
const remeber = ref(false)
const autoLogin = ref(false)
/**
 * 获取记住账号的缓存
 * 如果有记住账号，需要给输入框赋值，并且把记住账号的标识勾选上
 */
let _username =localStorage.getItem('user-name')
let _password =localStorage.getItem('password')
if(_username&&_password){
  try{
    _username=deCodeApi(_username)
    _password = deCodeApi(_password)
    username.value = _username
    password.value = _password
    remeber.value = true
  }catch{}
}
// onMounted(function(){
//   let userInfo = userInfoApi('admin79')
//   console.log('-----用户信息',userInfo)
// })
function toForget(){
  
  router.push('/forget')
}
async function loginEvt() {
  let result = await loginApi({
    id:username.value,
    password:MD5(password.value).toString(),
  })

  if(result.code!==200){
    Toast.fail('登录失败，原因：' + result.message)
            return
  }
  let str = enCodeApi(result.data.token+ '---' + Date.now())
  sessionStorage.setItem('login-flag',str)
  commonDefinition().setToken(result.data.token)

  
  //获取用户信息
  let userInfo = await userInfoApi(result.data.id)
  commonDefinition().setUserInfo(userInfo.data)
  //获取用户权限
  
  let userRole = await userRoleApi(userInfo.data.role)
  commonDefinition().setUserRole(userRole.data)

  /** 判断用户是否同意免登录和记住手机号，同意需要加密缓存，不同意需要删除之前保留的信息 */
  if (autoLogin.value) {
    localStorage.setItem('auto-login', enCodeApi(result.data.token + '---' + Date.now()))
  } else {
    localStorage.removeItem('auto-login')
  }
  if (remeber.value) {
    localStorage.setItem('user-name', enCodeApi(username.value))
    localStorage.setItem('password', enCodeApi(password.value))

  } else {
    localStorage.removeItem('user-name')
    localStorage.removeItem('password')
  }

   router.push('/home')
}


</script>

<style lang="less" scoped>
@col1:rgb(192, 187, 187);
.wrap {
  width: 100%;
  height: 100%;
  background: url(../../images/wel.webp) no-repeat;
  background-size: 100% 100%;
  position: relative;
  .container {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    padding: 100px 45px 0px;
    h2 {
      color: white;
      margin-bottom: 40px;
      font-weight: normal;
    }
    .ipt-item {
      color: @col1;
      margin-bottom: 40px;
      font-size: 16px;
      label {
        display: block;
        margin-bottom: 10px;
      }
      input {
        display: block;
        width: 100%;
        background: rgba(0, 0, 0, 0);
        border: none;
        border-bottom: 1px solid #fff;
      }
    }
    .van-button {
      background: #e42929;
      border: none;
      color: @col1;
      border-radius: 5px;
      margin-bottom: 40px;

    }
    p {
      color: @col1;
      font-size: 12px;
      margin-top: 140px;
      width: 100%;
      text-align: center;
    }
    .pass{
        color: @col1;
      font-size: 16px; 
    }
  }
}
</style>
<style lang="less">
    .van-checkbox {
        font-size: .7rem;
        margin: 20px 0;
        
    }
    .van-checkbox__label{
      color: #c0bbbb !important;
    }
</style>